<template>
  <div>
    <div style="text-align:right;margin-bottom: 20px">
      <el-tooltip class="item" effect="dark" content="新增不良记录" placement="top">
        <el-button icon="el-icon-plus" type="primary" @click="handleEdit(false, {})" />
      </el-tooltip>
      <!-- <el-tooltip class="item" effect="dark" content="处置" placement="top">
        <el-button
          :disabled="selectedRows.length === 0"
          icon="el-icon-scissors"
          type="danger"
          @click="handleDeal"
        >处置</el-button>
      </el-tooltip>-->
    </div>
    <e-table
      ref="eTable"
      @tableCheck="handleTableCheck"
      @getList="handleGetList"
      :tableData="tableData"
      :columns="columns"
      :loading="loading"
    >
      <!-- <el-table-column slot="selection" align="center" type="selection" width="55" /> -->
      <el-table-column show-overflow-tooltip slot="info" label="供应商" align="center">
        <span slot-scope="scope">
          <detail-button class="fl" :record="scope.row">{{ scope.row.supplierName }}</detail-button>
        </span>
      </el-table-column>
      <el-table-column slot="contact" label="关系人" align="center" width="150">
        <span slot-scope="scope">
          <detail-button
            v-for="(item, index) in showList(scope.row.linkmanList)"
            :key="index"
            :salesMan="true"
            :record="scope.row"
          >{{ item.linkmanName }}</detail-button>
        </span>
      </el-table-column>
      <el-table-column slot="creator" label="创建人" align="center" width="80">
        <span slot-scope="scope">
          <el-button type="text">{{ scope.row.createUser }}</el-button>
        </span>
      </el-table-column>
      <el-table-column slot="action" fixed="right" label="操作" width="50" align="center">
        <template slot-scope="scope">
          <el-dropdown>
            <a class="el-dropdown-link">
              <i class="el-icon-menu"></i>
            </a>
            <el-dropdown-menu slot="dropdown">
              <template v-if="!scope.row.handleStateName">
                <el-dropdown-item @click.native="handleEdit(true, scope.row)">
                  <a>编辑</a>
                </el-dropdown-item>
              </template>
              <el-dropdown-item @click.native="handleEdit(true, scope.row, true)">
                <a>查看</a>
              </el-dropdown-item>
              <el-dropdown-item @click.native="$emit('detail', scope.row)">
                <a>详情</a>
              </el-dropdown-item>
              <!-- 处置的不能再处置，不能再编辑 -->
              <el-dropdown-item
                v-if="!scope.row.handleStateName"
                @click.native="$emit('deal', scope.row)"
              >
                <a class="red">处置</a>
              </el-dropdown-item>
              <el-dropdown-item
                v-if="scope.row.blacklistFlag === 1 || scope.row.stopFlag === 1"
                @click.native="handleResume(scope.row)"
              >
                <a class="green">恢复</a>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </e-table>
  </div>
</template>

<script>
import { badSupplierList, handleBadRecord, resumeRecord } from '@/api/supplier'
import { openNotification } from '@/utils/util'
import DetailButton from '@/components/DetailButton'

export default {
  components: {
    DetailButton
  },
  data() {
    return {
      selectedRows: [],
      queryParam: {
        pageNo: 1,
        pageSize: 10
      },
      loading: false,
      // 表头
      columns: [
        { slot: 'selection' },
        { slot: 'info' },
        {
          label: '不良类型',
          width: '150px',
          prop: 'badTypeName'
        },
        {
          label: '发生日期',
          width: '110px',
          prop: 'badDate'
        },
        { slot: 'contact' },
        { slot: 'creator' },
        {
          label: '处置结果',
          width: '100px',
          prop: 'handleStateName'
        },
        { slot: 'action' }
      ],
      tableData: [],
      total: 1
    }
  },
  mounted() {
    this.handleGetList()
  },
  methods: {
    handleResume(row) {
      console.log('row', row)
      let { supplierCode } = row
      let str = row.blacklistFlag ? 'blacklistFlag' : 'stopFlag'
      const _this = this
      this.$confirm({
        title: '确定操作',
        content: `您确定恢复该供应商的不良记录吗？`,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        centered: true,
        async onOk() {
          const res = await resumeRecord({ supplierCode, [row.blacklistFlag ? 'blacklistFlag' : 'stopFlag']: 1 })
          if (res.state === '000000') {
            openNotification('success', '恢复记录成功')
            _this.handleGetList()
          }
        }
      })
    },
    showList(str) {
      if (str && str !== '[]') {
        return JSON.parse(str)
      }
    },
    // 编辑
    handleEdit(bool, obj, view = false) {
      this.$nextTick(() => {
        this.$emit('edit', bool, obj, view)
      })
    },
    // 处置
    // async handleDeal() {
    //   if (this.selectedRows.length === 1) {
    //     this.$emit('deal', this.selectedRows[0])
    //   } else {
    //     this.selectedRows.map(v => {
    //       v.stopFlag = 1
    //       v.blacklistFlag = 1
    //       v.handleState = '002007003'
    //     })
    //     const res = await handleBadRecord(this.selectedRows)
    //     if (res.state === '000000') {
    //       openNotification('success', '批量处置成功')
    //       // 刷新页面清空数据
    //       this.handleGetList()
    //       // this.selectedRowKeys = []
    //       this.selectedRows = []
    //     }
    //   }
    // },
    // 获取不良记录列表
    async handleGetList(param = {}) {
      this.loading = true
      const res = await badSupplierList({ ...this.queryParam, ...param })
      if (res && res.data.records.length > 0) {
        const {
          state,
          data: { records, total }
        } = res
        this.tableData = records
        this.total = total
      } else {
        this.tableData = []
        this.total = 1
      }
      this.loading = false
    },
    handleTableCheck(arr) {
      this.selectedRows = arr
    }
  }
}
</script>

